<template>
  <div class="page-port">
    <div class="port-list" v-for="(port, index) in portList" :key="port.code">
      <div class="port-item">
        <div class="port-name" @dblclick="onRefresh(port, index)">{{ port.name }}</div>
        <div class="port-work-list">
          <PageScroll ref="pageScroll" :data="port.data" :page="port.page" @pullingUp="onPullingUp(port, $event)"
            @pullingDown="onPullingDown(port, $event)" @inited="onInited">
            <ul>
              <WorkItem v-for="(work, index) in port.data" :key="index" :work="work" class="port-work-item">
              </WorkItem>
            </ul>
          </PageScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageScroll from './components/PageScroll';
import WorkItem from './components/WorkItem.vue';
const PAGE_SIZE = 10;
export default {
  components: {
    PageScroll,
    WorkItem,
  },
  data() {
    return {
      portList: [
        // {
        //   name: '青岛港',
        //   code: 'qingdaogang',
        //   data: [],
        // },
        // {
        //   name: '烟台港',
        //   code: 'yantaigang',
        //   data: [],
        // },

        // {
        //   name: '日照港',
        //   code: 'rizhoagang',
        //   data: [],
        // },
        // {
        //   name: '渤海湾港',
        //   code: 'bohaiwangang',
        //   data: [],
        // },
      ],
    };
  },
  created() { },
  mounted() {
    let query = this.$route.query;
    if (Object.keys(query).length > 0 && query.port) {
      let protName = query.port;
      this.getTabList({ protName: protName });
    } else {
      this.$route.go(-1);
    }
  },
  methods: {
    // 获取当前港口的子公司
    getTabList(aParams) {
      let params = {
        protName: this.protName,
        ...aParams,
      }
      this.getAxios(this.$queryCompanyByPort, params).then((res) => {
        if (res.code == 0) {
          let list = res.data;
          let portList = list.map(val => {
            return {
              name: val.name,
              code: val.id,
              data: [],
            }
          })
          this.portList = portList;
        }
      }).catch(() => { }).finally(() => {
      });
    },
    onRefresh(port, index) {
      const scrolls = this.$refs.pageScroll;
      const scroll = scrolls && scrolls[index];
      if (scroll) {
        port.data = [];
        scroll.autoPullDownRefresh();
      }
    },
    onInited(scroll) {
      scroll.autoPullDownRefresh();
    },
    // 下拉刷新
    onPullingDown(port, scroll) {
      this.fetchData(port, scroll);
    },
    // 上拉加载
    onPullingUp(port, scroll) {
      this.fetchData(port, scroll);
    },
    fetchData(port, scroll) {
      let cur = scroll.page.current;
      const params = {
        pageNum: scroll.page.current,
        pageSize: PAGE_SIZE,
        companyName: port.name,
      };
      this.getAxios(this.$queryQingdaoPortData, params).then((res) => {
        if (res.code == 0) {
          scroll.setTotalPage(res.page.totalPage);
          let list = res.page.list;
          if (cur == 1) {
            port.data = list;
          } else {
            port.data = port.data.concat(list);
          }
        }
      }).finally(() => {
        if (cur == 1) {
          scroll.finishPullDown();
        } else {
          scroll.finishPullUp();
        }
        this.$nextTick(() => {
          scroll.refresh();
        });
      }).catch(() => { });
    },
  },
};
</script>

<style lang="less" scoped>
.page-port {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  // padding: 0 14px;
  // overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;

  /* Webkit 浏览器（Chrome、Safari） */
  ::-webkit-scrollbar {
    background-color: transparent;
    /* 设置滚动条背景色 */
    width: 12px;
    /* 设置滚动条宽度 */
  }

  ::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    /* 设置滚动条滑块颜色 */
    border-radius: 6px;
    /* 设置滑块圆角 */
  }

  /* Firefox 浏览器 */
  scrollbar-color: #ffffff transparent;
  /* 设置滚动条滑块颜色和背景色 */
  scrollbar-width: thin;
  /* 设置滚动条宽度 */

  .port-list {
    position: relative;
    width: 25%;
    min-width: 320px;
    // height: 100%;
    height: calc(87vh - 0px);
    min-height: calc(87vh - 0px);
    padding-left: 16px;
    padding-right: 16px;

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      right: -1px;
      top: 0;
      width: 2px;
      background: url(~@/assets/svg/port-split.svg) no-repeat;
    }

    &:last-of-type::after {
      display: none;
    }

    .port-item {
      height: 100%;
    }

    .port-name {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 60px;
      background: url(~@/assets/svg/port-name-bg.svg) center no-repeat;
      font-size: 24px;
      font-weight: 900;
      color: #ffffff;
      cursor: pointer;
    }

    .port-work-list {
      width: 100%;
      // height: calc(100% - 85px);
      // overflow: hidden;
      margin-top: 24px;
      padding: 0px;
      height: calc(100vh - 196px);
      overflow-y: auto;

      ::v-deep {
        ul {
          padding: 0px;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }

      .port-work-item+.port-work-item {
        margin-top: 20px;
      }
    }
  }
}
</style>
